<template>
  <div>
    <div class="demo">
      <div class="demo-item">
        普通select
        <KunkkaSelect :optionlist="optionlist" :prop="prop" :model="model" />
      </div>

      <div class="demo-item">
        disabled select
        <KunkkaSelect
          clearable="true"
          :optionlist="optionlist"
          :prop="prop"
          :model="model"
          disabled="true"
        />
      </div>
      <div class="demo-item">
        带占位符的 select
        <KunkkaSelect
          clearable="true"
          :optionlist="optionlist"
          :prop="prop2"
          :model="model"
          placeholder="请选择按钮"
        />
      </div>
    </div>

    <div class="markdown-body">
      <readme />
    </div>
  </div>
</template>

<script>
import Readme from './readme.md';
export default {
  name: 'SelectDoc',
  components: { Readme },
  data() {
    return {
      prop: 'study',
      prop2: 'study2',
      optionlist: [
        {
          cKeyname: '小明',
          cKeynumb: 1
        },
        {
          cKeyname: '小李',
          cKeynumb: 2
        }
      ],
      model: {
        study: 1,
        study2: null
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.demo {
  display: inline-block;
  .demo-item {
    margin-left: 20px;
    display: inline-block;
  }
}
</style>
